<template>
    <div>
        <ul>
            <li>                
                <span>最大温度</span>
                {{data.maxTemperature | decimal }} ℃
            </li>
            <li>                
                <span>最小温度</span>
                {{data.minTemperature | decimal }} ℃
            </li>
            <li>                
                <span>平均温度</span>
                {{data.avgTemperature | decimal}} ℃
            </li>
            <li>
                电量
                {{data.batValue | decimal}} %
            </li>
            <li>
                <span>记录间隔</span>
                {{data.interval1 | decimal}} 分
            </li>
            <li>
                <span>温度上限</span>                
                {{data.downTemperature | decimal}} ℃
            </li>
            <li>
                <span>温度下限</span>                
                {{data.upTemperature | decimal}} ℃
            </li>
            <li>
                <span>位置</span>                
                {{data.readPlace}}
            </li>
            <li>
                <span>上传时间</span>                
                {{data.tempTime}}
            </li>
            <li>
                <span>启动时间</span>                
                {{data.tempTime}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['summaryData'],
    filters:{
        // 保留小数点过滤
        decimal(value){
            let num = String(value).indexOf('.') + 1
            return num > 0 ? value.toFixed(1) : value
        }
    },
    computed:{
        data(){
            let arr = this.summaryData
            let arr2 = {}
            for(let i in arr){
                arr2 = arr[0]
            }
            return arr2
        }
    }
}
</script>

<style lang="less" scoped>
ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li{
        padding: 15px 0;
        border: 1px solid #dddee1;
        width: 22%;
        text-align: center;
        margin: 10px 0;
        border-radius: 2px;
        transition: all .2s ease-in-out;
        &:hover{
            box-shadow: 0 1px 6px rgba(0,0,0,.2);
            border-color: #eee;
        }
    }
    &:after{
        content: '';
        width:22%;
    }
}
</style>
